<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>无缝滚动</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="banner">
		<div class="left">
			<img src="images/btn_left.png">
		</div>
		<div class="middle">
			<ul>
				<li>
					<div class="l_con">
						<img src="images/6-6.jpg">
					</div>
					<div class="r_con">
						<img src="images/6.jpg">
					</div>
				</li>
				<li>
					<div class="l_con">
						<img src="images/1-1.jpg">
					</div>
					<div class="r_con">
						<img src="images/1.jpg">
					</div>
				</li>
				<li>
					<div class="l_con">
						<img src="images/2-2.jpg">
					</div>
					<div class="r_con">
						<img src="images/2.jpg">
					</div>
				</li>
				<li>
					<div class="l_con">
						<img src="images/3-3.jpg">
					</div>
					<div class="r_con">
						<img src="images/3.jpg">
					</div>
				</li>
				<li>
					<div class="l_con">
						<img src="images/4-4.jpg">
					</div>
					<div class="r_con">
						<img src="images/4.jpg">
					</div>
				</li>
				<li>
					<div class="l_con">
						<img src="images/5-5.jpg">
					</div>
					<div class="r_con">
						<img src="images/5.jpg">
					</div>
				</li>
				<li>
					<div class="l_con">
						<img src="images/6-6.jpg">
					</div>
					<div class="r_con">
						<img src="images/6.jpg">
					</div>
				</li>
				<li>
					<div class="l_con">
						<img src="images/1-1.jpg">
					</div>
					<div class="r_con">
						<img src="images/1.jpg">
					</div>
				</li>
			</ul>
		</div>
		<div class="right">
			<img src="images/btn_right.png">
		</div>
	</div> 
<script src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
	var index=1;
	/*左边按钮*/
	$(".banner .left img").click(function(){
		index++;
		if(index>6){
			index=1;
			$("ul").css({left:"0"});/*直接设置位置*/
		}
		play();
	})
	/*右边按钮*/
	$(".banner .right img").click(function(){
		index--;
		if(index<1){
			index=6;
			$("ul").css({left:-1020*7+"px"});/*直接设置位置*/
		}
		play();
	})
	function play(){
		$("ul").animate({left:-1020*index+"px"},500)
	}
	/*定时器*/
	setInterval(function(){
		index++;
		if(index>6){
			index=1;
			$("ul").css({left:"0"});/*直接设置位置*/
		}
		play();
	},3000)
</script>
</body>
</html>